<template lang="pug">
.cp-courseman-popup
  el-dialog.crm-pop(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    :close-on-click-modal="!isEdit",
    width="60%")
    el-tabs.crm-pop-tab(v-model="tabIndex")
      el-tab-pane(label="基本信息", name="0")
      el-tab-pane(label="课堂", name="1", v-if="formData.courseMode == 'offline'")
      el-tab-pane(label="培训材料", name="2")
      el-tab-pane(label="测试题库", name="3", v-if="formData.assess == '1'")
    el-form.crm-pop-form(
      :model="formData",
      :inline="true",
      :rules="rules",
      ref="formData",
      v-show="tabIndex == '0'",
      label-width="80px")
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="课程名称", prop="courseName")
            el-input(v-model="formData.courseName", :disabled="!isEdit")
        el-col(:span="12")
          el-form-item(label="课程编号", prop="courseCode")
            el-input(v-model="formData.courseCode", :disabled="!isEdit")
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="课程描述", prop="introduction")
            el-input(type="textarea", :rows="3", :disabled="!isEdit", placeholder="请输入内容", v-model="formData.introduction")
        el-col(:span="12")
          div
            el-form-item(label="可用性", prop="available")
              el-radio(v-model="formData.available", label="1", :disabled="!isEdit") 启用
              el-radio(v-model="formData.available", label="0", :disabled="!isEdit") 禁用
          div
            el-form-item(label="版本", prop="version")
              el-select(v-model="formData.version", disabled, style="width: 120px; margin-right: 10px;")
                el-option(v-for="(item, index) in versionSelect", :key="index", :label="item.name", :value="item.value")
              el-button(type="primary", plain, :disabled="!isEdit", @click="showVersionPop") 版本管理
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="课程分类", prop="courseType")
            el-select(v-model="formData.courseType", :disabled="!isEdit")
              el-option-group(v-for="group in courseTypeSelect", :key="group.name", :label="group.name")
                el-option(v-for="item in group.options", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="12")
          el-form-item(label="版本有效期")
            p.height32
              el-input(v-model="formData.versionStart", style="width: 100px;", disabled)
              span(style="padding: 0 10px;") -
              el-input(v-model="formData.versionEnd", style="width: 100px;", disabled)
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="授课方式", prop="courseMode")
            el-select(v-model="formData.courseMode", :disabled="!isEdit")
              el-option(v-for="(item, index) in courseModeSelect", :key="index", :label="item.name", :value="item.value")
        el-col(:span="12")
          el-form-item(label="考核设置", prop="assess")
            el-radio(v-model="formData.assess", label="1", :disabled="!isEdit") 是
            el-radio(v-model="formData.assess", label="0", :disabled="!isEdit") 否
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="培训机构", prop="agency")
            el-select(v-model="formData.agency", :disabled="!isEdit")
              el-option(v-for="(item, index) in agencySelect", :key="index", :label="item.name", :value="item.value")
        el-col(:span="12", v-show="formData.assess == '1'")
          el-form-item(label="达标")
            p.height32
              el-input(v-model="formData.qScore", style="width: 60px;", :disabled="!isEdit")
              span.ml 分（百分制）
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="培训老师", prop="trainTeacher")
            el-select(v-model="formData.trainTeacher", :disabled="!isEdit || formData.courseMode == 'offline'")
              el-option(v-for="item in trainTeacherSelect", :key="item.value", :label="item.name", :value="item.value")
        el-col(:span="12", v-show="formData.assess == '1'")
          el-form-item(label="考核提数")
            p.height32
              el-input(v-model="formData.qNumber", style="width: 60px;", :disabled="!isEdit")
              span.ml 道
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="培训时长")
            p.height32
              el-input(v-model="formData.trainTime", style="width: 60px;", :disabled="!isEdit")
              span.ml 分钟
        el-col(:span="12", v-show="formData.assess == '1'")
          el-form-item(label="出题方式")
            el-radio(label="0", v-model="formData.questionWay", :disabled="!isEdit") 随机
            el-radio(label="1", v-model="formData.questionWay", :disabled="!isEdit") 必考题
      el-row(:gutter="24")
        el-col(:span="12")
          el-form-item(label="适用人员")
            //- el-button(type="primary", plain, @click="selectForPeople") 选择适用人员
            el-row(:gutter="24")
              el-checkbox(true-label="1", false-label="0", :disabled="!isEdit", v-model="formData.accordOrg") 按照组织架构选择
            el-row(:gutter="24")
              el-select(v-model="formData.accordOrgArr", multiple, :disabled="!isEdit || formData.accordOrg != '1'")
                el-option(v-for="item in orgSelect", :label="item.name", :value="item.value", :key="item.value")
            el-row(:gutter="24")
              el-checkbox(true-label="1", false-label="0", :disabled="!isEdit", v-model="formData.accordRole") 按照角色选择
            el-row(:gutter="24")
              el-select(v-model="formData.accordRoleArr", multiple, :disabled="!isEdit || formData.accordRole != '1'")
                el-option(v-for="item in roleSelect", :label="item.name", :value="item.value", :key="item.value")
            el-row(:gutter="24")
              el-checkbox(true-label="1", false-label="0", :disabled="!isEdit", v-model="formData.accordBlack") 启用黑名单
            el-row(:gutter="24")
              el-select(v-model="formData.accordBlackArr", multiple, :disabled="!isEdit || formData.accordBlack != '1'")
                el-option(v-for="item in empSelect", :label="item.name", :value="item.value", :key="item.value")
        el-col(:span="12")
          el-form-item.img-wrap(label="图片")
            img.img(:src="formData.imgUrl", @click="onPicPreview")
            .action-wrap(v-show="isEdit")
              el-upload(
                class="img-upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :show-file-list="false"
                :on-success="onPicSuccess")
                i(class="icon el-icon-upload2")
              i(class="icon el-icon-delete", @click="onPicRemove")
    .class-tab(v-show="tabIndex == '1'")
      .class-table-title
        span 课堂列表
        el-button.right-btn(type="primary", size="mini", v-if="isEdit", @click="addClass") 新增课堂
      el-table.class-table(:data="formData.classList", border, height="160px")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, label="教室编号")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.classCode | compare-list(classCodeSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.classCode")
              el-option(v-for="(item, index) in classCodeSelect", :key="index", :label="item.name", :value="item.value")
        el-table-column(show-overflow-tooltip, prop="classAddress", label="教室地址")
        el-table-column(label="授课时间", min-width="120px")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.classTime | day-format}}
            div.table-input-time(v-show="scope.row.canEdit")
              el-date-picker(v-model="scope.row.classTime", type="date")
        el-table-column(show-overflow-tooltip, label="授课老师")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.classTeacher | compare-list(classTeacherSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.classTeacher")
              el-option(v-for="(item, index) in classTeacherSelect", :key="index", :label="item.name", :value="item.value")
        el-table-column(show-overflow-tooltip, label="费用(元)")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.classCost}}
            el-input(v-show="scope.row.canEdit", v-model="scope.row.classCost")
        el-table-column(show-overflow-tooltip, prop="classSeat", label="座位数")
        el-table-column(show-overflow-tooltip, prop="classSeatAvail", label="可用座位")
        el-table-column(label="操作", min-width="100px", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit && scope.row.fromAdd")
              i.icon-act.el-icon-edit(@click="editClass(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="delClass(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit && scope.row.fromAdd")
              i.icon-act.el-icon-check(@click="saveEditClass(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditClass(scope.$index, scope.row)")
      .stu-table-title
        span 待学人员列表共（{{formData.studentList ? formData.studentList.length : 0}}）人
      el-table.stu-table(:data="formData.studentList", border, height="160px")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="staffCode", label="员工编号")
        el-table-column(show-overflow-tooltip, prop="staffName", label="员工姓名")
    .data-table(v-show="tabIndex == '2'")
      el-upload(
        class="upload-wrap"
        ref="uploadRef"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :before-upload="uploadFileBefore"
        :on-success="uploadFileSucc"
        :on-error="uploadFileFail")
        el-button(type="primary", size="mini", v-if="isEdit", @click="uploadFile") 上传
      el-table.crm-pop-table(:data="formData.materialList", border)
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="name", label="材料名称")
          template(slot-scope="scope")
            a(target="_blank", :href="scope.row.url") {{ scope.row.name }}
        el-table-column(show-overflow-tooltip, label="上传人")
          template(slot-scope="scope")
            span {{ scope.row.uploader | compare-list(empSelect) }}
        el-table-column(show-overflow-tooltip, label="上传时间")
          template(slot-scope="scope")
            span {{ scope.row.uploadTime | date-format }}
        el-table-column(label="操作", min-width="60px", v-if="isEdit")
          template(slot-scope="scope")
            el-tooltip(content="删除")
              i.icon-act.el-icon-delete(@click="deleteFile(scope.row, scope.$index)")
    .test-question(v-show="tabIndex == '3'")
      .table-title
        a(v-if="!formData.topicArray || !formData.topicArray.length",
          v-show="isEdit", @click="initTopicArray") 初始化
      el-table.crm-pop-table(:data="formData.topicArray", stripe, v-show="tabIndex == '3'")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, label="题目")
          template(slot-scope="scope")
            div(v-if="!scope.row.canEdit") {{scope.row.question}}
            div(v-if="scope.row.canEdit")
              el-input(
                type="textarea"
                :rows="2"
                v-model="scope.row.question")
        el-table-column(show-overflow-tooltip, label="类型")
          template(slot-scope="scope")
            span(v-show="!scope.row.canEdit") {{scope.row.questionType | compare-list(questionTypeSelect)}}
            el-select(v-show="scope.row.canEdit", v-model="scope.row.questionType")
              el-option(v-for="item in questionTypeSelect", :label="item.name", :value="item.value", :key="item.value")
        el-table-column(show-overflow-tooltip, label="选项", min-width="140px")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              div(v-if="scope.row.questionOptions")
                p(v-for="(item, i) in scope.row.questionOptions", :key="i") {{optionSelect[i]}}：{{item.text}}
            div(v-show="scope.row.canEdit")
              div(v-if="!scope.row.questionOptions || !scope.row.questionOptions.length")
                a.action(@click="initOption(scope.$index)") 初始化
              div.option-input(v-if="scope.row.questionOptions && scope.row.questionOptions.length")
                div(v-for="(item, i) in scope.row.questionOptions", :key="i")
                  el-input(v-model="item.text")
                    span(slot="prepend") {{optionSelect[i]}}
                    span(slot="append")
                      i.icon-act.el-icon-plus(@click="addOption(item, i, scope.$index, scope.row)")
                      i.icon-act.el-icon-close(@click="cancelOption(item, i, scope.$index, scope.row)")
        el-table-column(label="答案")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit") {{scope.row.answer ? scope.row.answer.join('') : null}}
            div(v-show="scope.row.canEdit")
              el-select(v-show="scope.row.questionType == '1'", v-model="scope.row.answer", multiple)
                el-option(v-for="item in optionSelect", :label="item", :value="item", :key="item")
              el-select(v-show="scope.row.questionType != '1'", v-model="scope.row.answer[0]")
                el-option(v-for="item in optionSelect", :label="item", :value="item", :key="item")
        el-table-column(label="操作", min-width="104px", fixed="right", v-if="isEdit")
          template(slot-scope="scope")
            div(v-show="!scope.row.canEdit")
              i.icon-act.el-icon-edit(@click="editItem(scope.$index, scope.row)")
              i.icon-act.el-icon-plus(@click="addItem(scope.$index, scope.row)")
              i.icon-act.el-icon-delete(@click="deleteItem(scope.$index, scope.row)")
            div(v-show="scope.row.canEdit")
              i.icon-act.el-icon-check(@click="saveEditItem(scope.$index, scope.row)")
              i.icon-act.el-icon-close(@click="cancelEditItem(scope.$index, scope.row)")
    .pop-footer(slot="footer")
      el-button(plain, @click="closeDialog") 取消
      el-button(type="primary", @click="saveBill", v-if="isEdit", :disabled="saving") 保存
  el-dialog.perview-dia(:visible.sync="perviewVisible", width="40%")
    img(:src="perviewImageUrl" alt="")
  //- 版本管理
  version-popup(
    :visible.sync="vpVisible",
    :parent-data="vpData",
    @submit="onVpSubmit",
    @close="vpVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import CheckoutApi from '@/api/inventory/inbound';
import VersionPopup from '@/components/manage/train/versionPopup';

export default {
  name: 'coursemanpopup',
  components: {
    VersionPopup
  },
  props: {
    title: String,
    visible: Boolean,
    isEdit: Boolean,
    parentData: Object
  },
  data() {
    return {
      tabIndex: '0',
      // 新建时初始数据
      formData: this.parentData,
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        courseCode: [
          { required: true, message: '请输入课程编号', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入课程描述', trigger: 'blur' }
        ],
        available: [
          { required: true, message: '请选择可用性', trigger: 'blur' }
        ],
        courseType: [
          { required: true, message: '请选择课程分类', trigger: 'change' }
        ],
        assess: [
          { required: true, message: '请选择考核设置', trigger: 'change' }
        ],
        courseMode: [
          { required: true, message: '请选择授课方式', trigger: 'change' }
        ],
        agency: [
          { required: true, message: '请选择培训机构', trigger: 'change' }
        ]
      },
      // 版本管理
      vpVisible: false,
      vpData: {},
      // 图片
      perviewImageUrl: '',
      perviewVisible: false,
      // 避免重复提交
      saving: false,
      // 下拉框选项
      courseTypeSelect: [
        { name: '类别A', options: [{ value: 'a1', name: '类别A1' }, { value: 'a2', name: '类别A2' }] },
        {
          name: '类别B',
          options: [
            { value: 'b1', name: '类别B1' },
            { value: 'b2', name: '类别B2' },
            { value: 'b3', name: '类别B3' },
            { value: 'b4', name: '类别B4' }
          ]
        }
      ],
      versionSelect: [{ name: '3.1.0', value: 0 }, { name: '2.0.0', value: 1 }, { name: '1.2.1', value: 2 }],
      courseModeSelect: [{ name: '线上自学', value: 'online' }, { name: '线下授课', value: 'offline' }],
      trainTeacherSelect: [{ name: '李晓红', value: 0 }, { name: '黄小乐', value: 1 }, { name: '文自豪', value: 2 }],
      agencySelect: [{ name: '内部培训', value: 0 }, { name: 'TUV', value: 1 }, { name: 'SGS', value: 2 }],
      orgSelect: [],
      roleSelect: [],
      // 课堂
      classCodeSelect: [],
      classTeacherSelect: [],
      // 题库
      questionTypeSelect: [{ name: '单选', value: '0' }, { name: '多选', value: '1' }],
      optionSelect: ['A', 'B', 'C', 'D'],
    };
  },
  computed: {
    ...mapGetters({
      creator: 'employeeId',
      empSelect: 'empSelect'
    })
  },
  watch: {
    parentData(newData, oldData) {
      if (newData !== oldData) {
        this.formData = newData;
        this.dataCache = newData.topicArray ? newData.topicArray.slice() : [];
        // 显示第一个标签页
        this.tabIndex = '0';
        // 处理传入数据
        this.dealDetail(newData);
        // 避免初始显示表单校验结果
        setTimeout(() => {
          this.clearValidate();
        }, 10);
      }
    }
  },
  created() {
    // 缓存编辑表格数据
    this.dataCache = this.parentData.topicArray ? this.parentData.topicArray.slice() : [];
    // 类别列表
    ComApi.getTypes({ orderType: 'checkout' }).then((typeList) => {
      this.allCheckoutType = typeList;
    });
  },
  methods: {
    // 处理传入数据
    dealDetail(newData) {
      // 考核设置默认为否
      if (newData.assess != '1') {
        this.$set(this.formData, 'assess', '0');
      }
      // 默认按照组织架构选择适用人员
      if (newData.accordOrg != '0') {
        this.$set(this.formData, 'accordOrg', '1');
      }
      // 重置ckeckbox为默认
      if (newData.accordRole != '1') {
        this.$set(this.formData, 'accordRole', '0');
      }
      if (newData.accordBlack != '1') {
        this.$set(this.formData, 'accordBlack', '0');
      }
    },
    // 移除表单的校验结果
    clearValidate() {
      if (this.$refs.formData) {
        this.$refs.formData.clearValidate();
      }
    },
    // 关闭、取消
    closeDialog() {
      this.clearValidate();
      this.$emit('close');
    },
    // 校验topicArray
    validSkuArray() {
      let canSave = true;
      // 考核设置为是，一定要编写测试题库
      if (this.formData.assess == '1' && (!this.formData.topicArray || !this.formData.topicArray.length)) {
        this.$message.error('测试题库列表不能为空');
        canSave = false;
        return false;
      }
      // 线上自学时，培训材料必填
      if (this.formData.courseMode == 'online' && (!this.formData.materialList || !this.formData.materialList.length)) {
        this.$message.error('培训材料不能为空');
        canSave = false;
        return false;
      }
      // 线下授课时，课堂必填
      if (this.formData.courseMode == 'offline' && (!this.formData.classList || !this.formData.classList.length)) {
        this.$message.error('课堂不能为空');
        canSave = false;
        return false;
      }
      this.formData.topicArray.forEach((item) => {
        if (!item.sku) {
          this.$message.error('问题题目不能为空');
          canSave = false;
          return false;
        }
        if (item.canEdit) {
          this.$message.error('请先确认问题');
          canSave = false;
          return false;
        }
      });
      return canSave;
    },
    // 保存
    saveBill() {
      if (this.saving) {
        return false;
      }
      this.saving = true;
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          this.$message.error('必填项不能为空');
          this.saving = false;
          return false;
        }
        if (!this.validSkuArray()) {
          this.saving = false;
          return false;
        }
        const params = { ...this.formData };
        CheckoutApi.saveNewInvCheckout(params).then((res) => {
          if (!res.status) {
            if (!this.formData.courseName) {
              // 新增
              res.obj.isNew = true;
            } else {
              res.obj.isNew = false;
            }
            this.$emit('submit', res.obj);
            this.closeDialog();
            this.$message({ message: '保存成功', type: 'success' });
            this.saving = false;
          } else {
            this.$message.error(res.comment || '保存失败');
            this.saving = false;
          }
        }).catch((error) => {
          this.saving = false;
          console.log(JSON.stringify(error));
          this.$message.error('网络不给力，请稍后再试');
        });
        return true;
      });
    },
    // 版本管理
    showVersionPop() {
      this.vpVisible = true;
      this.vpData = { versionList: [
        // { version: '1.2.1', desc: '初始版本', effective: '2018-01-01', expiration: '2018-05-06' }
      ] };
    },
    // 保存版本管理
    onVpSubmit(data) {
      console.log(data);
    },
    // 图片部分
    onPicSuccess(res, file, fileList) {
      this.$set(this.formData, 'imgUrl', fileList[0].url);
      console.log(res, file, fileList);
    },
    onPicRemove() {
      this.$confirm('此操作将删除图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formData.imgUrl = '';
        this.perviewImageUrl = '';
        this.$message({ message: '删除成功', type: 'success' });
        /* CheckoutApi.deleteInvCheckout().then((res) => {
          if (res.status === 0) {
            this.formData.imgUrl = '';
            this.perviewImageUrl = '';
            this.$message({ message: '删除成功', type: 'success' });
          } else {
            this.$message.error(res.comment || '删除失败');
          }
        }); */
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    onPicPreview() {
      if (this.formData.imgUrl) {
        this.perviewImageUrl = this.formData.imgUrl;
        this.perviewVisible = true;
      }
    },
    /* ****** 课堂tab  ****** */
    // 新增
    addClass() {
      if (this.formData.classList) {
        // 只能增加一条
        if (this.formData.classList[0] && this.formData.classList[0].fromAdd) {
          return;
        }
        const item = { canEdit: true, fromAdd: true };
        this.formData.classList.unshift(item);
        this.classListBC = this.formData.classList.slice();
      } else {
        this.$set(this.formData, 'classList', [{ canEdit: true, fromAdd: true }]);
        this.classListBC = this.formData.classList.slice();
      }
    },
    // 编辑
    editClass(index) {
      this.$set(this.formData.classList[index], 'canEdit', true);
      this.classListBC = this.formData.classList.slice();
    },
    // 删除
    delClass(index) {
      this.formData.classList.splice(index, 1);
      this.classListBC.splice(index, 1);
    },
    // 保存编辑
    saveEditClass(index) {
      this.formData.classList[index].canEdit = false;
    },
    // 取消编辑
    cancelEditClass(index) {
      const cache = Object.assign({}, this.classListBC[index], { canEdit: false });
      this.formData.classList.splice(index, 1, cache);
      this.formData.classList[index].canEdit = false;
    },
    /* ****** 培训材料上传  ****** */
    deleteFile(row, index) {
      console.log(row, index);
      this.formData.materialList.splice(index, 1);
    },
    // 附件上传
    uploadFile () {
      // 每次上传前清空上次文件
      this.$refs.uploadRef.clearFiles();
    },
    uploadFileBefore (file) {
      console.log(file);
      this.loading = this.$loading({
        fullscreen: true,
        text: '努力上传中, 请稍等...',
        background: 'transparent'
      });
    },
    uploadFileSucc (res, file) {
      if (file) {
        if (this.loading) {
          this.loading.close();
        }
        this.$message.success(`${file.name} 上传成功, 点击确认即可查看上传文件`);
        this.formData.materialList.unshift({
          id: res.id,
          url: file.url,
          name: res.name
        });
      }
    },
    uploadFileFail (res, file) {
      if (file) {
        if (this.loading) {
          this.loading.close();
        }
        this.$message.warning(`${file.name} 上传失败, 请稍后再试`);
      }
    },
    /* ****** 测试题库表格操作  ****** */
    // 初始化
    initOption(index) {
      this.$set(this.formData.topicArray, index, { canEdit: true, questionOptions: [{ text: '' }], answer: [] });
    },
    addOption(item, i, index, row) {
      if (row.questionOptions.length < this.optionSelect.length) {
        row.questionOptions.push({ text: '' });
      }
      console.log(item, i, index, row);
    },
    cancelOption(item, i, index, row) {
      row.questionOptions.splice(index, 1);
      console.log(item, i, index, row);
    },
    // 初始化
    initTopicArray() {
      this.$set(this.formData, 'topicArray', [{ canEdit: true, questionOptions: [{ text: '' }], answer: [] }]);
      this.dataCache = this.formData.topicArray.slice();
    },
    editItem(index) {
      this.dataCache[index] = Object.assign({}, this.formData.topicArray[index]);
      this.$set(this.formData.topicArray[index], 'canEdit', true);
    },
    addItem(index) {
      this.formData.topicArray.splice((index + 1), 0, { canEdit: true, questionOptions: [{ text: '' }], answer: [] });
      this.dataCache.splice((index + 1), 0, { canEdit: true, fromAdd: true });
    },
    deleteItem(index) {
      this.formData.topicArray.splice(index, 1);
      this.dataCache.splice(index, 1);
    },
    saveEditItem(index) {
      this.formData.topicArray[index].canEdit = false;
    },
    cancelEditItem(index) {
      const cache = Object.assign({}, this.dataCache[index], { canEdit: false });
      if (cache.fromAdd && this.dataCache.length > 1) {
        this.formData.topicArray.splice(index, 1);
        this.dataCache.splice(index, 1);
      } else {
        this.formData.topicArray.splice(index, 1, cache);
        this.formData.topicArray[index].canEdit = false;
      }
    }
  }
};
</script>

<style lang="sass">
$SEARCHHEIGHT: 104px
$SELECTWIDTH: 100px
.cp-courseman-popup
  .el-table
    th, td
      text-align: center
  .crm-pop
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 0 24px 15px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .crm-pop-tab
    .el-tabs__nav-wrap::after
      background-color: #fff
  .crm-pop-form
    .el-col
      overflow: inherit
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__label
      width: 80px
      text-align: left
    .el-form-item__content
      min-width: 120px
      width: calc(100% - 80px)
    .el-select, .el-date-editor.el-input
      width: 100%
    .height32
      height: 32px
      line-height: 32px
    .ml
      margin-left: 10px
  .class-tab
    .class-table-title
      line-height: 28px
      margin: 0 0 10px 0
      .right-btn
        display: inline-block
        float: right
    .class-table
      .table-input-time
        .el-date-editor.el-input, .el-date-editor.el-input__inner
          width: auto
        .el-input--prefix .el-input__inner
          padding-right: 0
    .stu-table-title
      line-height: 28px
      margin: 0 5px
  .upload-wrap
    text-align: right
    margin-bottom: 10px
  .test-question
    margin-top: -15px
  .table-title
    color: #5D9BFB
    line-height: 20px
    margin: 10px 0
  .crm-pop-table
    .el-table__body-wrapper
      min-height: 304px
      max-height: 380px
      overflow: auto
    .action
      color: #5D9BFB
      line-height: 20px
    .option-input
      .el-input-group__append
        padding: 0
      .el-input-group__prepend
        width: 24px
        padding: 0 6px
        text-align: center
  .icon-act
    font-size: 16px
    font-weight: 500
    padding: 4px
    cursor: pointer
    &:hover
      color: #5D9BFB
  .img-wrap
    .img
      display: inline-block
      vertical-align: top
      width: 178px
      height: 178px
      border: 1px dashed #d9d9d9
      border-radius: 6px
      cursor: pointer
      position: relative
      &:hover
        border-color: #409EFF
    .action-wrap
      display: inline-block
      width: calc(100% - 178px)
      margin-top: 20px
      text-align: center
      .img-upload
        display: inline-block
      .icon
        font-size: 18px
        font-weight: 600
        padding: 4px
        margin: 4px
        cursor: pointer
        &:hover
          color: #5D9BFB
  .perview-dia
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
      img
        width: 100%
</style>
